<template>
  <el-form ref="formRef" :model="editBook" label-width="120px" :rules="rules">
    <el-form-item label="书号" prop="id">
      <el-input v-model="editBook.id" />
    </el-form-item>
    <el-form-item label="书名" prop="name">
      <el-input v-model="editBook.name" />
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input v-model="editBook.author" />
    </el-form-item>
    <el-form-item label="价格" prop="price">
      <el-input v-model="editBook.price" />
    </el-form-item>
    <el-form-item label="图片" prop="img">
      <el-input v-model="editBook.img" />
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-input v-model="editBook.type" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="editBookFn(formRef)">修改</el-button>
      <el-button @click="cancelFn">取消</el-button>
    </el-form-item>
  </el-form>
</template>
    
<script  setup>
import { reactive, ref, watch } from "vue";
import { getBookDetailApi, editBookApi } from "@/api/crud";

const props = defineProps(["id"]);

const formRef = ref();

//  定义修改的书籍
const editBook = reactive({
  id: "",
  name: "",
  author: "",
  price: 0,
  img: "",
  type: "",
});

// 获取当前修改的书籍信息
const getBookDetail = async () => {
  try {
    const res = await getBookDetailApi(props.id);
    // editBook = res.data;
    for (let key in editBook) {
      editBook[key] = res.data[key];
    }
  } catch (err) {
    console.log("服务器出错", err);
  }
};

console.log("props", props);

watch(
  props,
  () => {
    console.log("props.id变了");
    getBookDetail();
  },
  { deep: true, immediate: true }
);

const emit = defineEmits(["close", "ok"]);

// 表单验证的规则
const rules = reactive({
  id: [{ required: true, message: "请输入书号", trigger: "blur" }],
  name: [{ required: true, message: "请输入书名", trigger: "blur" }],
  author: [{ required: true, message: "请输入作者", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  img: [{ required: true, message: "请输入图片地址", trigger: "blur" }],
  type: [{ required: true, message: "请输入类型", trigger: "blur" }],
});

const editBookFn = (formEl) => {
  if (!formEl) {
    return;
  }

  formEl.validate((isOk) => {
    if (isOk) {
      editBookApi(props.id, editBook)
        .then((res) => {
          console.log(res);
          if (res.data) {
            alert("修改成功！");
            // 关闭弹窗
            emit("ok");
          }
        })
        .catch((err) => {});
    }
  });
};

const cancelFn = () => {
  emit("close");
};
</script>